<template>
  <div class="app-container calendar-list-container">
    <el-button
        type="primary"
        size="mini"
        style="margin-top: 5px;"
        @click="updatePhone"
    >修改联系人</el-button>
    <el-dialog :title="diglogTitle" :visible.sync="showUpdatephone" width="500px">
      <el-tag
        :key="tag"
        v-for="tag in dynamicTags"
        closable
        :disable-transitions="false"
        @close="handleClose(tag)">
        {{tag}}
        </el-tag>
        <el-input
        class="input-new-tag"
        v-if="inputVisible"
        v-model="inputValue"
        ref="saveTagInput"
        size="small"
        @keyup.enter.native="handleInputConfirm"
        @blur="handleInputConfirm"
        >
        </el-input>
        <el-button v-else class="button-new-tag" size="small" @click="showInput">新增联系人</el-button>
        <div slot="footer" class="dialog-footer">
        <el-button @click="showUpdatephone = false">取消</el-button>
        <el-button type="primary" @click="submit"
          >确定</el-button
        >
      </div>
    </el-dialog>
    <!--表格 -->
    <div style="margin-top: 20px">
        联系人：
        <p v-for="(item,index) in list" :key="index">
            {{item}}
        </p>
    </div>
    <!-- 回到顶部 -->
    <BackToTop></BackToTop>
  </div>
</template>
<script>
import { getphone,updatephone } from "@/api/firePush";
import { parseTime, getdTime } from "@/utils/index";

import BackToTop from "@/components/BackToTop";
export default {
  name: "addnewContact",
  components: {
    BackToTop
  },
  data() {
    return {
        // 卡类型
       cardTypeOptions:[
          {
        value:'1',
        label:'城市卡'
        },
        { 
        value:'2',
        label:'设备卡'
        }
      ],
      list: null,
      dynamicTags: [],
      downloadLoading: false,
      showUpdatephone: false,
      inputVisible: false,
      inputValue: '',
      diglogTitle: '修改联系人'
    };
  },

  methods: {
  //导出
   //导出
    handleDownload() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['序号','昵称','手机号','卡号','可用时长','卡类型','所属城市', '所属设备Id','所属设备编号','是否使用','是否过期','开始时间','结束时间','创建时间']
        const filterVal = [ 'index',	'nickName', 'userPhone','cardNo','time', 'cardTypeInfo', 'address','equipmentId','equipmentNumber', 'isUseInfo', 'isPastInfo','startTime','endTime','ctime']
        const data = this.formatJson(filterVal, this.list)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: '用户月卡列表'
        })
        this.downloadLoading = false
      })
    },
    // 数据筛选
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
          return v[j]
      }))
    },
   
    //获取列表
    async getList() {
      try {
         //调用服务器接口
        const data = await getphone({
          ...this.listQuery
        });
        console.log('data',data)
        this.list = data.data
      } catch (error) {}
    },
    //修改
    async submit() {
      let query = {
        parameter: JSON.parse(JSON.stringify(this.dynamicTags)).join(',')
      }
      try {
         //调用服务器接口
        const data = await updatephone({
          ...query
        });
        this.$message({
            type: "success",
            message: data.msg,
        });
        this.showUpdatephone = false
        this.getList()
      } catch (error) {

      }
    },
    updatePhone(){
        this.showUpdatephone = true
        this.dynamicTags = JSON.parse(JSON.stringify(this.list))
    },
    handleClose(tag) {
        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },

    showInput() {
        this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
    },

    handleInputConfirm() {
        let inputValue = this.inputValue;
        if (inputValue) {
          this.dynamicTags.push(inputValue);
        }
        this.inputVisible = false;
        this.inputValue = '';
    }
  },

  created() {
    this.getList();
  }
};
</script>
<style lang="scss" scoped>
/deep/ .el-carousel__container {
  height: 500px !important;
}
 .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>
